<template>
  <view class="container">
    <!--input列表 -->
    <view class="input-box">
      <view class="section">
        <text>宝贝姓名</text>
        <input
          placeholder="请输入宝贝姓名"
          type="text"
          maxlength="15"
          :value="name"
          @input="onInputName"
        >
      </view>
      <view class="section">
        <text>手机号</text>
        <input
          placeholder="请输入宝贝11位手机号码"
          type="number"
          maxlength="11"
          :value="mobile"
          @input="onInputPhone"
        >
      </view>
      <!-- <view class="section">
        <text>身份证号</text>
        <input
          placeholder="请输入宝贝身份证号"
          type="number"
          maxlength="18"
          :value="cardNo"
          @input="onInputCardNo"
        >
      </view> -->
      <view
        class="section"
        @tap="translate('school')"
      >
        <text>所在学校</text>
        <view class="pca" :class="{ 'gray' : !schoolId }">
          {{ schoolId ? schoolName : '请选择宝贝所在学校' }}
        </view>
        <view class="arrow">
          <image src="@/static/images/icon/more.png" />
        </view>
      </view>
      <view
        class="section"
        @tap="translate('class')"
      >
        <text>所在班级</text>
        <view class="pca" :class="{ 'gray' : !classId }">
          {{ classId ? className : '请选择宝贝所在班级' }}
        </view>
        <view
          class="animation-element-wrapper"
          :animation="animation"
          :style="'visibility:' + (show ? 'visible':'hidden')"
          @tap.stop="hiddenFloatView"
        >
          <view
            class="animation-element"
            @tap.stop="nono"
          >
            <text
              class="right-bt"
              @tap.stop="hiddenFloatView"
            >
              确定
            </text>
            <view class="line" />
            <picker-view
              indicator-style="height: 50rpx;"
              @change="bindChangeSchool"
              @tap.stop="nono"
              v-if="type == 'school'"
            >
              <!--学校-->
              <picker-view-column>
                <view
                  v-for="(item, index) in schoolList"
                  :key="index"
                >
                  {{ item.name }}
                </view>
              </picker-view-column>
            </picker-view>
            <picker-view
              indicator-style="height: 50rpx;"
              @change="bindChangeClass"
              @tap.stop="nono"
              v-else
            >
              <!--班级-->
              <picker-view-column>
                <view
                  v-for="(item, index) in classList"
                  :key="index"
                >
                  {{ item.name }}
                </view>
              </picker-view-column>
            </picker-view>
          </view>
        </view>
        <view class="arrow">
          <image src="@/static/images/icon/more.png" />
        </view>
      </view>
    </view>
    <!-- end input列表 -->
    <!-- 协议 -->
    <view class="agreement">
      <checkbox-group class="checkbox-dot" @change="onChange">
        <checkbox class="checkbox-dot" :checked="false" value="cb" style="transform:scale(0.7)"  />
        同意已阅读<text @tap="onRead('1')">《用户服务协议》</text>和<text @tap="onRead('2')">《隐私政策》</text>
      </checkbox-group>
    </view>

    <!-- 功能按钮 -->
    <view class="btn-box">
      <view
        class="keep btn"
        @tap="onComfirm"
      >
        <text>确定</text>
      </view>
    </view>
    <!-- end 功能按钮 -->
  </view>
</template>

<script setup>
const name = ref('')
const phone = ref('')
// const cardNo = ref('')
const schoolId = ref(0)
const schoolName = ref('')
const schoolList = ref([])
const classId = ref(0)
const className = ref('')
const classList = ref([])
const addr = ref('')
const type = ref('')
const checked = ref([])

onLoad((options) => {
  const babyInfo = JSON.parse(options.babyInfo)
  name.value = babyInfo?.name ?? ""
  phone.value = babyInfo?.phone ?? ""
  // cardNo.value = babyInfo?.cardNo ?? ""
  schoolId.value = babyInfo?.schoolId ?? ""
  classId.value = babyInfo?.classId ?? ""
  name.value = babyInfo?.name ?? ""
  getSchoolList()
})

/**
 * 获取学校列表
 */
const getSchoolList = () => {
  http.request({
    url: '/xcx/schoolList',
    method: 'POST',
    data: {}
  }).then(({ data }) => {
    if(data?.key == 0) {
      uni.hideLoading()
      schoolList.value = data?.result ?? []
      const { id, name } = schoolList.value[0] ?? {}
      schoolId.value = id
      schoolName.value = name
      getClassList()
    }
  })
}

/**
 * 获取年级列表
 */
const getClassList = () => {
  http.request({
    url: '/xcx/classList',
    method: 'POST',
    data: {
      openId: uni.getStorageSync('openId'),
      schoolId: schoolId.value
    }
  }).then(({ data }) => {
    if(data?.key == 0) {
      uni.hideLoading()
      classList.value = data?.result ?? []
      const { id, name } = classList.value[0] ?? {}
      classId.value = id
      className.value = name
    }
  })
}
/**
 * 滑动事件
 */
const bindChangeSchool = (e) => {
  // 判断滑动的是第几个column
  const val = e.detail.value
  schoolList.value?.map((m, index) => {
    if (index == val[0]) {
      schoolId.value = m.id
      schoolName.value = m.name
      getClassList()
    }
  })
}

const bindChangeClass = (e) => {
  // 判断滑动的是第几个column
  const val = e.detail.value
  classList.value?.map((m, index) => {
    if (index == val[0]) {
      classId.value = m.id
      className.value = m.name
    }
  })
}

const onChange = (e) => {
  checked.value = e.detail.value
}

const onRead = (e) => {
  uni.navigateTo({
    url: `/pages/agreement/agreement?num=${e}`
  })
}

let t = 0
let moveY = 200
const show = ref('')
/**
 * 移动按钮点击事件
 */
const translate = (e) => {
  type.value = e
  if (t == 0) {
    moveY = 0
    show.value = true
    t = 1
  } else {
    moveY = 200
    show.value = false
    t = 0
  }
  animationEvents(moveY, show.value)
}

/**
 * 隐藏弹窗浮层
 */
const hiddenFloatView = () => {
  moveY = 200
  show.value = false
  t = 0
  animationEvents(moveY, show.value)
}

const animation = ref('')
/**
 * 动画事件
 */
const animationEvents = (moveY, showParam) => {
  animation.value = uni.createAnimation({
    transformOrigin: '50% 50%',
    duration: 400,
    timingFunction: 'ease',
    delay: 0
  })
  animation.value.translateY(moveY + 'vh').step()
  animation.value = animation.value.export()
  show.value = showParam
}

/**
 * 保存地址
 */
const onComfirm = () => {
  const nameParam = name.value
  // const cardParam = cardNo.value
  const phoneParam = phone.value
  const schoolParam = schoolId.value
  const classParam = classId.value

  if (!nameParam.trim()) {
    name.value = ''
    uni.showToast({
      title: '请输入宝贝姓名',
      icon: 'none'
    })
    return
  }

  if (!phoneParam) {
    phone.value = ''
    uni.showToast({
      title: '请输入宝贝手机号码',
      icon: 'none'
    })
    return
  }

  if (phoneParam.length != 11) {
    uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    })
    return
  }

  if (!schoolParam) {
    uni.showToast({
      title: '请选择学校',
      icon: 'none'
    })
    return
  }
  if (!classParam) {
    uni.showToast({
      title: '请选择班级',
      icon: 'none'
    })
    return
  }
  if(checked.value.length == 0){
    uni.showToast({
      title: '请勾选《用户服务协议》《隐私协议》！',
      icon: 'none'
    })
    return
  }
  const pages = getCurrentPages() // 当前页面
  const prevPage = pages[pages.length - 2] // 上一页面
  prevPage.infos = {
    name: name.value,
    phone: phone.value,
    // cardNo: cardNo.value,
    schoolId: schoolId.value,
    schoolName: schoolName.value,
    className: className.value,
    classId: classId.value
  } // 直接给上一页面赋值
  prevPage.selAddress = 'yes'
  // 返回
  uni.navigateBack({
    delta: 1
  })

}
const onInputName = (e) => {
  name.value = e.detail.value
}
const onInputPhone = (e) => {
  phone.value = e.detail.value
}
// const onInputCardNo = (e) => {
//   cardNo.value = e.detail.value
// }

</script>

<style scoped lang="scss">
@use './infos.scss';
</style>
